<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery操作事件</title>
    <link rel="stylesheet" href="/static/css/myDocPage.css">
    <style>

        .content {
            display: none;
        }

        .scrollKeepOnBottom {
            border: 1px solid black;
            width: 300px;
            height: 100px;
            overflow: auto;
            word-break: break-all;
        }

    </style>
</head>
<body>
<div>
    <h1>一. 点击循环显示节点</h1>
    <h2 id="head">1.1 普通实现方式</h2>
    <div class="content">
        jquery是一个js库
    </div>
    <h2 id="head4">1.2 使用toggle来模拟鼠标单击事件</h2>
    <div>
        jquery是一个js库4
    </div>
</div>
<div>
    <h1 id="head2">二. 鼠标移入移出循环显示节点</h1>
    <div class="content">
        jquery是一个js库2
    </div>
    <h2 id="head3">2.1 使用合成事件模拟鼠标悬停</h2>
    <div class="content">
        jquery是一个js库3
    </div>
</div>
<div>
    <h1>三. 事件冒泡</h1>
    <h2>3.1 事件冒泡简单演示</h2>
    <div id="bubbleDiv" style="width: 300px; height: 50px; background-color: red;">
        <p id="bubbleP" style="width: 200px; height: 50px; background-color: blue;">
            <span id="bubbleSpan" style="width: 100px; height: 50px; background-color: yellow;">点击触发事件冒泡</span>
        </p>
    </div>
    <h2>3.2 阻止事件冒泡</h2>
    <div id="bubbleDiv1" style="width: 300px; height: 50px; background-color: red;">
        <p id="bubbleP1" style="width: 200px; height: 50px; background-color: blue;">
            <span id="bubbleSpan1" style="width: 100px; height: 50px; background-color: yellow;">点击触发事件冒泡</span>
        </p>
    </div>
</div>
<div>
    <h1>四. 用js代码主动触发事件</h1>
    <h2>4.1 使用jquery的方法进行触发</h2>
    <div style="width: 100px; height: 100px; background-color: #00F7DE;" id="dbClickDiv">
        双击这个div可以触发这里的双击事件
    </div>
    <button id="dbButton">使用jquery的trigger方法触发事件</button>
</div>
<div>
    <h1>五. 获取滚动条高度, 控制滚动条滚动指定高度</h1>
    <h2>5.1 jquery代码实现</h2>
    <div style="border: 1px solid black; width: 200px; height: 100px; overflow: auto;" id="scrollContent"
         class="scroll2">
        abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz
        abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz
        abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz
        abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz
        abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz
        abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz
        abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz
        abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz
        abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz
        abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz
        abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz
        abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz
    </div>
    <button id="getScrollHeight">获取滚动条当前高度(相对于所在容器)</button>
    <button id="setScrollHeight">使滚动条滑动到指定位置</button>
</div>
<div>
    <h1>六. jquery控制光标</h1>
    <h2>6.1 在A输入框失去焦点后将光标移动到下一个节点</h2>
    <div>
        <lable></lable>
        <input type="text" id="name" placeholder="输入完成后点击输入框外任意位置即可"/>
        <lable></lable>
        <input type="text" id="age"/>
        <lable></lable>
        <input type="text" id="address"/>
    </div>
    <h2>6.2 使光标始终保持在底部并修改滚动条的样式</h2>
    <!--
    说明:
        1. word-break:break-all: 表示超出宽度的文本自动换行.
    -->
    <div class="scrollKeepOnBottom scroll" style="" id="scrollKeepOnBottom">

    </div>
    <button id="appendText">添加一行数据</button>
</div>
</body>
<script src="/static/jquery-3.4.1.js"></script>
<script>

    $(function () {
        showGotoHideLoop();
        toggleEvent();
        mouseShowOrHide();
        syntheticEvent();
        bubbleEventInit();
        stopBubbleEventInit();
        doubleClickDivInit();
        scrollInit();
        moveCursorInit();
        scrollKeepOnBottomButtonInit();
    });

    function showGotoHideLoop() {
        $('#head').bind("click", function () {
            let $content = $('#head').next();
            /**
             * 说明:
             *      1. 节点.is(':visible'): 判断元素是否隐藏, 其实就是判断display属性是否为none.
             */
            if ($(this).next().is(':visible')) {
                $content.hide();
            } else {
                $content.show();
            }
        });
    }

    function mouseShowOrHide() {
        $('#head2').bind("mouseover", function () {
            $(this).next().show();
        }).bind("mouseout", function () {
            $(this).next().hide();
        });
    }

    function syntheticEvent() {
        /**
         * 说明:
         *      1. hover方法说明:
         *          - 方法模型: hover(enter, leave);
         *              1. enter: 是光标移动到元素上触发的事件;
         *              2. leave: 当光标移出元素时触发的事件.
         */
        $('#head3').hover(function () {
            $(this).next().show();
        }, function () {
            $(this).next().hide();
        });
    }

    function toggleEvent() {
        $('#head4').bind("click", function () {
            $(this).next().toggle();
        })
    }

    /**
     * 说明:
     *      1. 在页面上点击文字时, 从console中可以看到, 点一次三个事件都触发了.
     */
    function bubbleEventInit() {
        $('#bubbleDiv').bind("click", function () {
            console.log("bubbleDiv事件触发");
        });
        $('#bubbleP').bind("click", function () {
            console.log("bubbleP事件触发");
        });
        $('#bubbleSpan').bind("click", function () {
            console.log("bubbleSpan事件触发");
        });
    }

    /**
     * 说明:
     *      1. bing方法的第二个参数是事件触发的函数, 而这个函数的参数event表示传入的事件;
     *          - 调用这个事件的stopPropagation()方法即可阻止事件冒泡.
     */
    function stopBubbleEventInit() {
        $('#bubbleDiv1').bind("click", function () {
            console.log("bubbleDiv事件触发");
        });
        $('#bubbleP1').bind("click", function (event) {
            console.log("bubbleP事件触发");
            event.stopPropagation();
        });
        $('#bubbleSpan1').bind("click", function (event) {
            console.log("bubbleSpan事件触发");
            event.stopPropagation();
        });
    }

    function doubleClickDivInit() {
        $("#dbClickDiv").bind("dblclick ", function () {
            console.log("hello");
        });
        /**
         * 说明:
         *      1. trigger方法可以用来模拟触发所选对象上的事件.
         *          - 触发的事件就是传入的参数对应的事件;
         */
        $('#dbButton').bind("click", function () {
            $("#dbClickDiv").trigger("dblclick");
        });
    }

    function scrollInit() {
        let $scrollContent = $('#scrollContent');
        $('#getScrollHeight').bind("click", function () {
            console.log($scrollContent.scrollTop());
        });
        $("#setScrollHeight").bind("click", function () {
            /**
             * 说明:
             *      1. animate是一个动画方法, 会自动过渡所设置css属性的变化过程;
             *          - 第一个参数: `{scrollTop: 100}`表示设置滚动条的竖直方向高度为100;
             *          - 第二个参数: 800表示过渡过程的时间.
             *          - [可选]第三个参数: 动画过程执行完毕后的回调函数.
             */
            $scrollContent.animate({
                scrollTop: 100
            }, 800);
        });
    }

    /**
     * 说明:
     *      1. blur方法是用来绑定失去焦点事件的;
     *
     */
    function moveCursorInit() {
        $('#name').blur(function () {
            /**
             * 说明:
             *      1. focus函数有无参数的意义是不同的:
             *          - 没有参数时: 设置焦点到指定的节点上;
             *          - 有参数时: 给节点设置获取焦点事件;
             */
            $('#age').focus();
        });

        $('#age').blur(function () {
            /**
             * 说明:
             *      1. focus函数有无参数的意义是不同的:
             *          - 没有参数时: 设置焦点到指定的节点上;
             *          - 有参数时: 给节点设置获取焦点事件;
             */
            $('#address').focus();
        });
    }

    function scrollKeepOnBottomButtonInit() {
        $("#appendText").click(function () {
            $('#scrollKeepOnBottom').append("abcdefghijklmn")
                .scrollTop($("#scrollKeepOnBottom")[0].scrollHeight);
        });
    }

</script>
</html>